<template>
  <div class="page-container">
        <!--工具栏-->
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;width: 100%;">
          <el-form :inline="true" :model="filters" :size="size" ref="filters" class="border" style="margin-bottom: 15px;">
            <div style="width: 100%;">
              <el-form-item style="width:32%">
                <span style="color: #999;">活动名称：</span>
                <span style="margin-left:10px;">活动名称</span>
              </el-form-item>
              <el-form-item style="width:32%">
                <span style="color: #999;">活动ID：</span>
                <span style="margin-left:10px;">活动名称</span>
              </el-form-item>
              <el-form-item style="width:32%">
                <span style="color: #999;">当前状态：</span>
                <span style="margin-left:10px;">活动名称</span>
              </el-form-item>
            </div>
          </el-form>
           <el-form :inline="true" :model="filters" :size="size" ref="filters" style="text-align: center;">
              <el-button type="primary" @click="sumbit" >提交审核</el-button>
           </el-form>
        </div>
          <div class="tab-container">
            <el-alert :closable="false" style="background-color: #ffffff;color: #ffffff;" title="" type="success" />
            <el-tabs type="border-card">
              <el-tab-pane label="促销规则">
                  <div>
                      <form class="form-horizontal ">
                        <div class="pdL10 border-left font-bold mgB15 ng-binding">基本信息</div>
                        <div class="form-group">
                            <!--活动名称-->
                            <label class="col-sm-2 control-label ng-binding" ng-show="promotionDetailContent.promotionMethod != 17">活动名称：</label>
                            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType == 13 &amp;&amp; promotionDetailContent.promotionMethod == 17">定金支付时间</label> -->
                            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                                直降007
                            </div>
                        </div>
                        <div class="line line-dashed b-b line-lg  ng-scope"></div>
                        <div class="form-group">
                            <!--活动时间-->
                            <label class="col-sm-2 control-label ng-binding" >活动时间：</label>
                            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" v-show="promotionDetail.promotionType == 13 || promotionDetail.promotionType == 17">定金支付时间</label> -->
                            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                                2019-12-25 20:07:02 至 2019-12-27 20:07:04
                            </div>
                        </div>
                        <div class="line line-dashed b-b line-lg  ng-scope"></div>
                        <div class="pdL10 border-left font-bold mgB15 ng-binding">活动规则</div>
                        <div class="form-group ng-scope">
                            <!--活动类型(促销类型)-->
                            <label class="col-sm-2 control-label ng-binding">选品范围：</label>
                            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                                部分参与
                            </div>
                        </div>
                        <div class="line line-dashed b-b line-lg  ng-scope"></div>
                        <div class="form-group" ng-show="activityType==0 &amp;&amp; canCreateApplyActivity()">
                            <!--参与方式-->
                            <label class="col-sm-2 control-label ng-binding">活动类型：</label>
                            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                                单品X件优惠
                            </div>
                        </div>
                        <div class="line line-dashed b-b line-lg  ng-scope"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label ng-binding">活动规则说明：</label>
                        </div>
                        <div class="line line-dashed b-b line-lg  ng-scope"></div>
                        <div class="pdL10 border-left font-bold mgB15 ng-binding ng-scope">交易规则</div>
                        <div class="form-group">
                            <!--是否支持折上折-->
                            <label class="col-sm-2 control-label ng-binding">是否支持折上折：</label>
                            <div class="col-sm-10 pdt3px themeTextColor">
                                <span ng-if="promotionDetailContent.canUseDiscount == 0" class="ng-binding ng-scope">是</span>
                                
                            </div>
                        </div>
                        <div class="line line-dashed b-b line-lg  ng-scope"></div>
                        <div class="form-group">
                            <!--是否排斥优惠券-->
                            <label class="col-sm-2 control-label ng-binding">是否排斥优惠券：</label>
                            <!-- <label class="col-sm-2 control-label ng-binding ng-hide">是否排斥优惠券（尾款支付）</label> -->
                            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                                否
                            </div>
                        </div>
                        <div class="line line-dashed b-b line-lg  ng-scope"></div>
                        <div class="form-group ng-scope">
                            <!--是否包邮-->
                            <label class="col-sm-2 control-label ng-binding" >是否包邮：</label>
                            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType==9">包邮方式</label> -->
                            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                                否
                            </div>
                        </div>
                       <!-- <div class="line line-dashed b-b line-lg  ng-scope"></div>
                        <div class="form-group ng-scope" ng-if="promotionDetailContent.promotionType == 1 || promotionDetailContent.promotionType == 14">
                            <label class="col-sm-2 control-label ng-binding">超限规则</label>
                            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                                按原价购买
                            </div>
                        </div>
                        -->
                        <div class="line line-dashed b-b line-lg  ng-scope"></div>
                        <div ng-show="supplierAllocationShow()" class="">
                            <div class="col-sm-2 control-label">
                                <label class="ng-binding"> 供应商分摊比例：</label>
                            </div>
                            <div class="col-sm-10 control-label">
                                <table border="1">
                                    <thead>
                                    <tr>
                                        <th class="minw110 textCenter">供应商ID</th>
                                        <th class="minw110 textCenter">供应商名称</th>
                                        <th class="minw110 textCenter">分摊比例</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <!-- ngRepeat: e in promotionDetailContent.selectedSupplierList -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="line line-dashed b-b line-lg  ng-scope"></div>
                        <div class="pdL10 border-left font-bold mgB15 ng-binding">
                            参与条件
                        </div>
                        <div class="line line-dashed b-b line-lg  ng-scope"></div>
                        <div ng-controller="activitiObjDetailCtrl" class="ng-scope">
                          <!--活动渠道-->
                          <div class="line line-dashed b-b line-lg" ng-show="promotionDetailContent.channelCodes.length > 0"></div>
                          <div class="form-group ng-scope" ng-if="promotionDetailContent.channelCodes.length > 0">
                              <label class="col-sm-2 control-label ng-binding">活动渠道：</label>

                              <div class="col-sm-10 pdt3px">
                                  <span ng-repeat="channel in promotionDetailContent.channelCodes" class="ng-binding ng-scope">BBC &nbsp;</span>
                              </div>
                          </div>

                          <div class="line line-dashed b-b line-lg" ng-show="canShowActivityPlatformLimitShow()"></div>
                          <div class="form-group ng-scope" ng-if="canShowActivityPlatformLimitShow()">
                              <label class="col-sm-2 control-label ng-binding">活动平台：</label>

                              <div class="col-sm-10 pdt3px">
                                  <span ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList" class="ng-binding ng-scope">APP端 &nbsp;</span>
                                  <span ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList" class="ng-binding ng-scope">PC端 &nbsp;</span>
                                  <span ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList" class="ng-binding ng-scope">微信 &nbsp;</span>
                              </div>
                          </div>

                          <div class="line line-dashed b-b line-lg  "></div>
                          <div class="form-group">
                              <label class="col-sm-2 control-label ng-binding">新老用户：</label>
                              <div class="col-sm-10 pdt3px">
                                  <span ng-repeat="userScope in promotionDetailContent.userScopeList" class="ng-binding ng-scope">新用户 &nbsp;</span><!-- end ngRepeat: userScope in promotionDetailContent.userScopeList --><span ng-repeat="userScope in promotionDetailContent.userScopeList" class="ng-binding ng-scope">老用户 &nbsp;</span><!-- end ngRepeat: userScope in promotionDetailContent.userScopeList -->
                              </div>
                          </div>
                          <div class="line line-dashed b-b line-lg  "></div>
                          <div class="form-group">
                              <label class="col-sm-2 control-label ng-binding">会员类型：</label>
                              <div class="col-sm-10 pdt3px">
                                  <span ng-repeat="type in promotionDetailContent.memberTypeList" class="ng-binding ng-scope">普通会员 &nbsp;</span>
                              </div>
                          </div>
                          <!-- 会员等级(修改) -->
                          <div class="line line-dashed b-b line-lg  "></div>
                          <div class="form-group">
                              <div ng-repeat="e in memberLevelArray" class="ng-scope">
                                  <label class="col-sm-2 control-label ng-binding ng-scope" ng-if="$index==0">会员等级：</label>
                                  <div class="col-sm-10 pdt3px">
                                    <span ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList" class="ng-binding ng-scope">普通会员 &nbsp;</span>
                                    <span ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList" class="ng-binding ng-scope">注册用户 &nbsp;</span>
                                    <span ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList" class="ng-binding ng-scope">VIP会员金卡 &nbsp;</span>
                                    <span ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList" class="ng-binding ng-scope">金卡 &nbsp;</span>
                                </div>
                              </div>
                          </div>
                            <div class="line line-dashed b-b line-lg  "></div>
                          <div class="form-group ng-scope" ng-if="promotionDetailContent.promotionType != 12">
                            <!--备注-->
                            <label class="col-sm-2 control-label ng-binding">优惠设置：</label>
                            <div class="col-sm-10 pdt3px themeTextColor">
                                <span ng-repeat="type in promotionDetailContent.memberTypeList" class="ng-binding ng-scope">第1件，打1 折 &nbsp;</span>
                            </div>
                          </div>
                          <div class="line line-dashed b-b line-lg  "></div>
                          <div class="form-group ng-scope" ng-if="promotionDetailContent.promotionType != 12">
                            <!--备注-->
                            <label class="col-sm-2 control-label ng-binding">备注：</label>
                            <div class="col-sm-10 pdt3px themeTextColor">
                                <p ng-bind-html="promotionDetailContent.description|to_trusted" class="ng-binding"></p>
                            </div>
                          </div>
                        </div>
                      </form>
                  </div>
              </el-tab-pane>
              <el-tab-pane label="参与商家/店铺">
                <el-tabs type="border-card">
                  <el-tab-pane label="商家">
                    <el-table :data="businessList" border style="width: 100%">
                      <el-table-column prop="id" label="商品编码"></el-table-column>
                      <el-table-column prop="name" label="商家名称"></el-table-column>
                      <el-table-column prop="type" label="组织分类"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="店铺">
                    <el-table :data="shopList" border style="width: 100%">
                      <el-table-column prop="id" label="店铺编码"></el-table-column>
                      <el-table-column prop="name" label="店铺名称"></el-table-column>
                      <el-table-column prop="type" label="店铺类型"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-tab-pane>
              <el-tab-pane label="参与商品">
                <div style=" height: 40px;"><el-button size="mini" style="float: left;" type="primary" @click="revokeProduct()">撤出商品</el-button></div>
                <div>
                <el-tabs type="border-card">
                  <el-tab-pane label="生效商品(1)">
                      <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="id" label="商品编码" width="180"></el-table-column>
                        <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
                        <el-table-column prop="address" label="商品条码"></el-table-column>
                        <el-table-column prop="unit" label="计量单位"></el-table-column>
                        <el-table-column prop="shopName" label="商家名称"></el-table-column>
                        <el-table-column prop="price" label="统一零售价（元）"></el-table-column>
                        <el-table-column prop="markdown" label="直降（元）"></el-table-column>
                        <el-table-column prop="shopLimit1" label="商家单渠道限购"></el-table-column>
                        <el-table-column prop="shopLimit2" label="店铺单渠道限购"></el-table-column>
                        <el-table-column prop="shopLimit3" label="个人单渠道限购"></el-table-column>
                        <el-table-column prop="address" label="订单限购"></el-table-column>
                      </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="互斥商品(0)">
                      <el-table border style="width: 100%">
                        <el-table-column prop="id" label="商品编码" width="180"></el-table-column>
                        <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
                        <el-table-column prop="address" label="商品条码"></el-table-column>
                        <el-table-column prop="unit" label="计量单位"></el-table-column>
                        <el-table-column prop="shopName" label="商家名称"></el-table-column>
                        <el-table-column prop="price" label="互斥记录时间"></el-table-column>
                        <el-table-column prop="markdown" label="操作"></el-table-column>
                      </el-table>
                  </el-tab-pane>
                </el-tabs>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { darkmagenta } from 'color-name';
import tabPane from './components/TabPaneCreateGroupon'
export default {
  name: 'Tab',
  components: {
    tabPane ,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      size: "small",
      filters: {
      },
      multipleSelection: [],
      businessList:[{"id":"001","name":"张小二服饰","type":"自营商家"}],
      shopList:[{"id":"161616","name":"张小二bbc店铺","type":"直营"}],
      tableData:[{"id":1912250010887324,"productName":"新供应商001","unit":'件',"shopName":'张小二服饰',"price":1.2,"markdown":1,"shopLimit1":100,"shopLimit2":100,"shopLimit3":100,}],
    };
  },
  methods: {
    sumbit:function(data){
        this.$message({ message: "操作成功", type: "success" });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    revokeProduct() {
      if (this.multipleSelection.length > 0) {
        this.tableData = [];
        this.$message({ message: "操作成功", type: "success" });
      } else {
        this.$message({message: "操作失败, 请选择要撤出的商品",type: "error"});
      }
    },
    createPage(){
      this.$router.push("/CreatePromotion");
    }
  },
  mounted() {
  }
};
</script>

<style scoped lang='scss'>
.border {
    color: #666666;
    font-size: 16px;
    font-weight: bold;
    line-height: 28px;
    border-bottom: 1px solid #666666;
    padding-bottom: 3px;
}
.pdL10 {
  padding-left: 10px!important;
}
.mgB15 {
    margin-bottom: 15px!important;
}
.border-left {
    border-left: 3px #ddd solid !important;
}
.font-bold {
    font-weight: 700;
}
.form-group {
    margin-bottom: 15px!important;
    margin-right: -0px!important;
    margin-left: -0px!important;
}
.form-horizontal .control-label {
    padding-top: 5px;
    margin-bottom: 0;
    text-align: right;
}
.form-horizontal div {
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif, "Regular", "Microsoft YaHei";
    font-size: 12px;
    color: #666666;
    background-color: transparent;
    -webkit-font-smoothing: antialiased;
    line-height: 1.42857143;
    word-wrap: break-word;
}
.form-horizontal .control-label {
    padding-top: 3px !important;
}
.col-sm-2 {
    width: 16.66666667%;
}
/* .col-sm-10 {
    width: 83.33333333%;
} */
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
label {
    font-weight: normal;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}
.form-group .pdt3px {
    padding-top: 3px;
}
.b-b {
    border-bottom: 1px solid #dddddd;
}
.line-dashed {
    border-style: dashed !important;
    background-color: transparent;
    border-width: 0;
}
.line-lg {
    margin-top: 15px;
    margin-bottom: 15px;
}
.line {
    width: 100%;
    height: 2px;
    margin: 10px 0;
    font-size: 0;
    overflow: hidden;
}
table {
    background-color: transparent;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
.i-checks {
    padding-left: 0;
    margin-right: 15px;
    cursor: pointer;
    color: #666666;
}
.radio-inline, .checkbox-inline {
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;
}
.panel-body tr {
    padding: 0 15px;
}
</style>